<script setup lang="ts">
import {CSSProperties} from 'vue'
import useConfig from '@/store/config'

import Logo from './components/logo.vue'
import MenuVertical from './components/menuVertical.vue'

const config = useConfig.setup().store
const asideStyle = () => {
  const style:CSSProperties = {}
  style.width = config.layout.menuCollapse ? '60px' : '240px'
  return style
}
</script>

<template>
  <el-aside class="home-aside-Default" :style="asideStyle()">
    <Logo />
    <MenuVertical />
  </el-aside>
</template>

<style scoped lang="less">
.home-aside-Default {
  background: var(--d-color-deep-2);
  height: 100vh;
  box-shadow: var(--el-box-shadow-light);
  overflow: hidden;
  transition: width 0.3s ease;
}
.shrink {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
}
</style>
